<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('用户注册')"/>
</head>
<body>
<div class="container">
    <div class = "d-flex justify-content-center">
        <div class="card float-right" style="width: 50rem;margin-top: 20%;float: right">
            <div class="card-body">
                <form action="" method="post" onsubmit="return false" id="registerForm">
                    <div class="form-group row">
                        <label for="loginName" class="col-sm-2 col-form-label">账号：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="loginName" name = "loginName" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="password" class="col-sm-2 col-form-label">密码：</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" name="password">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="repeatPassword" class="col-sm-2 col-form-label" style="padding-right: 0px">确认密码：</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="repeatPassword" name="repeatPassword">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="email" class="col-sm-2 col-form-label">邮箱：</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="email" name="email" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="phoneNumber" class="col-sm-2 col-form-label">号码：</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" autocomplete="off">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div style="padding: 0 15px;">
                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                            <label class="form-check-label" for="inlineRadio1">男</label>
                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" style="margin-left: 15px;">
                            <label class="form-check-label" for="inlineRadio2">女</label>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-10">
                            <button type="submit" class="btn btn-primary">Sign up</button>
                            <a href="javascript:void(0)" class="card-link" style="margin-left: 15px;" onclick="gotoLogin()">已有账号？</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var layer = layui.layer;
    $(function () {
        $("#registerForm").submit(function (form) {
            var loader = layer.load(1);
            layer.title('正在注册......', loader);
            $.ajax({
                type: "post",
                url: ctx + "user/add",
                dataType: "json",
                data: $("#registerForm").serialize(),
                success: function (result) {
                    if (result.type == 'AUTH') {
                        layer.close(loader);
                        alert(result.message);
                        location.href = ctx + "login";
                    }else {
                        layer.close(loader);
                        alert(result.message);
                        //location.href = ctx + "user/register";
                    }
                }
            });
        });
    });

    function gotoLogin() {
        location.href = ctx + "login";
    }
</script>

</body>
</html>